<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数字华容道</title>
		<script src="js/vue.js"></script>
		<style>
			body {
				font-family: Arial, sans-serif;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				margin: 0;
				background-color: #f0f0f0;
			}

			.container {
				text-align: center;
				width: 250px;
				background-color: orange;
				padding: 20px;
				border-radius: 15px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			}

			.title {
				font-size: 24px;
				margin-bottom: 20px;
				color: white;
				font-weight: bold;
			}

			.timer {
				font-size: 18px;
				margin-bottom: 20px;
				color: white;
			}

			.grid {
				display: grid;
				grid-template-columns: repeat(3, 80px);
				grid-gap: 10px;
				justify-content: center;
				list-style-type: none;
				padding: 0;
				margin: 0;
			}

			.cell {
				width: 80px;
				height: 80px;
				background-color: saddlebrown;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24px;
				font-weight: bold;
				cursor: pointer;
				border-radius: 8px;
				transition: background-color 0.2s, transform 0.2s;
				border: 2px solid black;
			}

			.cell:hover {
				background-color: sandybrown;
				transform: scale(1.1);
			}

			.empty {
				background-color: sandybrown;
				cursor: default;
				border: 2px solid black;
			}

			.button {
				margin-top: 20px;
				padding: 10px 20px;
				font-size: 16px;
				cursor: pointer;
				background-color: saddlebrown;
				color: white;
				border: none;
				border-radius: 5px;
				transition: background-color 0.3s;
			}

			.button:hover {
				background-color: sandybrown;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<div class="title">{{ title }}</div>
				<div class="timer">剩余时间：{{ formattedTime }}</div>
				<ul class="grid">
					<li v-for="(cell, index) in grid" :key="index" :class="['cell', { empty: cell === '' }]"
						@click="cell !== '' && move(index)">
						{{ cell }}
					</li>
				</ul>
				<button class="button" @click="shuffle">开始游戏</button>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						title: '数字华容道',
						grid: [1, 2, 3, 4, 5, 6, 7, 8, ''],
						timeLeft: 300,
						timer: null,
						gameOver: false,
						startTime: null,
					};
				},
				computed: {
					formattedTime() {
						const minutes = Math.floor(this.timeLeft / 60);
						const seconds = this.timeLeft % 60;
						return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
					}
				},
				methods: {
					shuffle() {
						let newGrid = this.grid.slice();
						for (let i = newGrid.length - 1; i > 0; i--) {
							const j = Math.floor(Math.random() * (i + 1));
							const temp = newGrid[i];
							newGrid[i] = newGrid[j];
							newGrid[j] = temp;
						}
						this.grid = newGrid;
						this.startTime = Date.now();
						this.startTimer();
					},
					move(index) {
						if (this.gameOver) return;
						const emptyIndex = this.grid.indexOf('');
						const validMoves = [
							emptyIndex - 3, emptyIndex + 3, emptyIndex - 1, emptyIndex + 1
						];
						if (validMoves.includes(index)) {
							const temp = this.grid[emptyIndex];
							this.grid[emptyIndex] = this.grid[index];
							this.grid[index] = temp;
							this.checkWin();
						}
					},
					startTimer() {
						this.timeLeft = 300;
						this.gameOver = false;
						if (this.timer) clearInterval(this.timer);
						this.timer = setInterval(() => {
							this.timeLeft--;
							if (this.timeLeft <= 0) {
								clearInterval(this.timer);
								this.gameOver = true;
								alert('挑战失败！');
							}
						}, 1000);
					},
					checkWin() {
						const winGrid = [1, 2, 3, 4, 5, 6, 7, 8, ''];
						if (this.grid.toString() === winGrid.toString()) {
							clearInterval(this.timer);
							const endTime = Date.now();
							const timeUsed = Math.floor((endTime - this.startTime) / 1000);
							alert(`游戏成功！您用时 ${timeUsed} 秒通过。`);
							this.gameOver = true;
						}
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>
